<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生就业统计表</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1</td>
        <td>迪丽热巴</td>
        <td>23</td>
        <td>女</td>
        <td>12000</td>
        <td>北京</td>
        <td>2099/9/9 08:08:08</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // 参考数据
    //获取元素
    const initData = [
      {
        stuId: 1,
        uname: '迪丽热巴',
        age: 22,
        salary: '12000',
        gender: '女',
        city: '北京',
        time: '2099/9/9 08:08:08'
      }
    ];

    //准备一个数组，如果本地存储中已经有数据，应该从本地存储中读取数据放入数组，否则就用空数组
    const localData = localStorage.getItem('stuData')//这是字符串
    // const data = localStorage ? JSON.parse(localData):[] //localStorage有就转成对象，给data，否则是[]
    // const arr = [];
    // if (localData != null) {
    //   arr = JSON.parse(localData)
    // }
    // 因为本地存储里面取出来的是字符串，不是对象，无法直接使用
    const data = JSON.parse(localData) || [];//短路或，只要有一个为真，结果就为真


    //1、录入模块
    //1.1、从表单来，到数组中，再到本地存储
    const form = document.querySelector('form')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')

    form.addEventListener('submit', function (e) {
      e.preventDefault()
      if (uname.value === '' || age.value === '' || salary.value === '') {
        alert('内容为空，不能提交')
      }

      // 2. 验证通过后，说明每一项都写了，那就可以将填写项组成一个对象，追加到数组中
      //创建新对象
      const newData = {

        stuId: data.length ? data[data.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: uname.value,
        salary: uname.value,
        gender: uname.value,
        city: uname.value,
        time: new Date().toLocaleString()

      }
      // console.log(newData);
      //追加到数组
      data.push(newData);
      // console.log(data);
      //清空表单
      form.reset()
      fun()
    })

    //2、渲染模块
    // 2.2、从数组中来，到html中表格中tbody
    //利用map遍历方法,返回一个tr的新数组
    function fun() {

      const newData1 = data.map(function (ele, i) {//ele代表元素，i代表元素下标
        return `
       <tr>
        <td>${ele.stuId}</td>
        <td>${ele.uname}</td>
        <td>${ele.age}</td>
        <td>${ele.salary}</td>
        <td>${ele.gender}</td>
        <td>${ele.city}</td>
        <td>${ele.time}</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu" data-id='${i}'></i>
            删除
          </a>
        </td>
      </tr> 

`
      })
      // 要将数组利用join方法。拼接成字符串，并去掉,号
      tbody.innerHTML = newData1.join('')
      // 显示条数
      document.querySelector('.title span').innerHTML = data.length
    }

    // console.log(newData1);

    // //3、删除模块
    // 3.1、从tbody中来，会改变数组中，重新渲染，重新本地存储
    // 1. 事件委托给tbody
    tbody.addEventListener('click', function (e) {
      // e.target.tagName
      if (e.target.tagName === 'A') {
        data.splice(e.target.dataset.id, 1)

        // 重新渲染
        fun()

        // 重新本地存储
        localStorage.setItem('stuData', JSON.stringify(data))

      }

    })







  </script>
</body>

</html>